<template>
  <div class="page">
    <div class="J-inlet-shop">
      <div class="inlet-coupon line-bottom pl" :class="{active:switchTc}">
        <div class="weui-cell">
          <div class="weui-cell__bd"><label class="weui-label">打印发票</label></div>
          <div class="weui-cell__ft">
            <input class="weui-switch" @change="switchTocoupon($event)" type="checkbox" />
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">发票抬头</label>
          </div>
          <div class="weui-cell__bd pl">
            <input type="text" v-model="userInfo.invoiceTitle" class="coupon-input weui-input" placeholder="点击填写" />
          </div>
        </div>
      </div>
      <div class="weui-cells">
        <div class="weui-cell" :class="{coupon:getCouponListByGs.total>'0'}" @click="sumitSelect">
          <div class="weui-cell__bd font-16"><p>优惠劵</p></div>
          <span class="weui-cell__ft font-16"
                v-text="getCouponListByGs.total>'0'?couponName:'暂无优惠劵可用'"></span>
        </div>
      </div>
      <div class="weui-cells _paytype">
        <div class="pay_radio">
          <label for="balance" class="_label" v-if="ispayType" :class="{'is-checked':payType == '1','is-disabled': !ispayType}">
            <input type="radio" class="_radio" id="balance" value="1"
                   :disabled="!ispayType?'disabled':false" v-model="payType">会员卡支付</label>
          <label for="payment" class="_label" :class="{'is-checked':payType == '0','is-disabled': p_isDisabled}">
            <input type="radio" class="_radio" id="payment"
                   :disabled="p_isDisabled" value="0" v-model="payType">微信支付</label>
        </div>
        <div class="pay_balance" v-if="payType == '1'">当前余额: <span class="color-3">{{getMemberInfoByGsId.balance}}</span> 元</div>
      </div>
      <div class="inlet-record inlet-record-bk"  :class="{activeFixd:getGoods && isShopMenu,zIndex:getGoods && isShopMenu,activeHide:getGoods && ShopListShow}">
        <div class="weui-flex pl">
          <div class="weui-flex__item line-bottom">
            <div class="record_a weui-cell_access">
              <div class="record_">
                <b class="fl font-14">交易清单</b>
                <span class="fr add-coupon-close" v-if="getGoods > 0 && isShopMenu" @click="colseMenu"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">{{cartInfo.GunNoName}}</span>
              <span class="fr"><em class="J-price color-1">{{cartInfo.RealPrice}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf" v-if="priceTotal.price>0">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">非油品</span>
              <span class="fr"><em class="J-price color-1">{{priceTotal.price}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf" v-if="couponVal>0">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">优惠劵</span>
              <span class="fr"><em class="color-3">-{{couponVal}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">油品优惠</span>
              <span class="fr"><em class="color-3">-{{cartInfo.couponPrice}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">待付</span>
              <span class="fr "><em class="color-3 J-price">{{(priceTotal.price+cartInfo.payPrice-couponVal) | toFixed}}</em></span>
            </div>
          </div>
        </div>
      </div>
      <div class="inlet-cart cart-shop-list" v-if="getGoods">
        <shop-cart @on-shop-cart="onshopcart" @on-other-nogas="onsoTherNogas"></shop-cart>
      </div>
      <div class="inlet-pay-alert inlet-record-bk" v-if="isShopPayAlert">
        <div class="weui-flex pl">
          <div class="weui-flex__item line-bottom">
            <div class="record_a weui-cell_access">
              <div class="record_">
                <b class="fl font-14">{{cartInfo.gsName}}</b>
                <span class="fr add-coupon-close" @click="colseMenu"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">{{cartInfo.GunNoName}}</span>
              <span class="fr" @click="colseMenu"><em class="J-price color-1">{{cartInfo.RealPrice}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf" v-if="priceTotal.price>0">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">非油品</span>
              <span class="fr"><em class="J-price color-1">{{priceTotal.price}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf" v-if="couponVal>0">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">优惠劵</span>
              <span class="fr"><em class="color-3">-{{couponVal}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">油品优惠</span>
              <span class="fr"><em class="color-3">-{{cartInfo.couponPrice}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex pl bf">
          <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">总共节省</span>
              <span class="fr "><em class="color-3">-{{(cartInfo.couponPrice+couponVal) | toFixed}}</em></span>
            </div>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">
            <div @click="submitPrice" class="weui-btn weui-btn_primary">立即支付
              <span class="J-price">{{(priceTotal.price+cartInfo.payPrice-couponVal) | toFixed}}</span></div>
          </div>
        </div>
      </div>
      <div class="activeFixd-bg" v-if="isShopPayAlert || (getGoods && isShopMenu)" @click="colseMenu"></div>
    </div>
    <div class="inlet-shop-pay line-top pl" :class="{active:isShopPayAlert}">
      <div class="weui-flex">
        <div class="shop-list-btn pl" v-if="getGoods" @click="openMenu">
          交易清单<span class="weui-badge" v-if="priceTotal.num!=0" style="position: absolute;top: -.4em;right: -.4em;">{{priceTotal.num}}</span></div>
        <div class="weui-flex__item">
          <a class="weui-btn weui-btn_primary" href="javascript:" @click="openPayalert">立即支付
            <span class="J-price">{{(priceTotal.price+cartInfo.payPrice-couponVal) | toFixed}}</span></a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const weui = require('weui')
  import ShopCart from '~components/mixins/shopcart.vue'
  const config = require('~src/config')
  const util = require('~src/lib/util')
  import { mapGetters } from 'vuex'
  export default {
    name: 'inlet-shop',
    data () {
      return {
        ShopList: [],
        integralList: [],
        isShopMenu: false,
        pickerArr:[],
        payType:'0',
        ispayType:false,
        b_isDisabled:false,
        p_isDisabled:false,
        cartInfo: {},
        couponName:'',
        couponId: 0,
        couponVal:0,
        otherNoGasPrice:0,
        otherNoGasId: 0,
        isShopPayAlert: false,
        ShopListShow: true,
        switchTc: false,
        invoiceTitle: ''
      }
    },
    computed: {
      ...mapGetters({
        getGoods: 'getGoods',
        userInfo: 'getUserInfo',
        getCouponListByGs: 'getCouponListByGs',
        getMemberInfoByGsId: 'getMemberInfoByGsId',
        getOrderNo: 'getOrderNo',
        getPayinfo: 'getPayinfo'
      }),
      priceTotal: function () {
        // 计算总金额, 总数量
        var total = {
          price: 0,
          num: 0
        }
        if (this.getGoods) {
          this.getGoods = this.ShopList
          for (var i = 0; i < this.getGoods.length; i++) {
            total.price += this.getGoods[i].itemTruePrice * this.getGoods[i].itemAmount
            total.num += this.getGoods[i].itemAmount
          }
        } else {
          this.isData = true
        }
        total.price = total.price + parseFloat(this.otherNoGasPrice || 0)   //减非油品的价格
        return total
      },
      //判断是否余额支付
      _payType () {
        var priceTotal =  this.priceTotal.price + this.cartInfo.payPrice - this.couponVal
        return this.getMemberInfoByGsId.total_balance > priceTotal?'1':'0'
      }
    },
    components: {
      ShopCart
    },
    mounted () {
      var _this = this
      var cart = JSON.parse(util.localItem.get('cart'))
      var gsId = cart.gsId
      _this.$nextTick(function () {
        this.cartInfo = JSON.parse(util.localItem.get('cart'))
        if (util.isEmptyObject(_this.getGoods)) {
          _this.$store.dispatch('getGoods', gsId)
        }
        if (util.isEmptyObject(_this.getCouponListByGs)) {
          var config = {
            id: gsId,
            gsPrice:this.cartInfo.RealPrice,
            discountPrice:this.cartInfo.discountPrice,
          }
          _this.$store.dispatch('getCouponListByGs', config)
        }
        if (util.isEmptyObject(_this.getMemberInfoByGsId)) {
          _this.$store.dispatch('getMemberInfoByGsId', gsId)
        }
        if (util.isEmptyObject(_this.userInfo)) {
          _this.$store.dispatch('getUserInfo', {openid: util.localItem.get('openid')})
        }
      })
    },
    watch: {
      'getOrderNo' (val) {
        if (val.pay_info.orderNo) {
          this.$router.push('/payok?orderNo=' + val.pay_info.orderNo)
        }
      },
      //监听支付方式
      _payType (val) {
        if (val) {
          this.payType = val
          if (val === '1') {
            this.ispayType = true
          }
        }
      },
      //如果是在线支付就直接调起支付
      getPayinfo (val) {
        if (val.pay_channel == '1') {
          location.href = val.pay_info
        }
        if (val.pay_channel == '0') {
          function onBridgeReady(){
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', val.pay_info,
              function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                  location.href = '/payok?orderNo='+val.orderNo
                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
              }
            );
          }
          if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          }else{
            onBridgeReady();
          }
        }
      }
    },
    methods: {
      // 回传非油品数组
      onshopcart (val) {
        this.ShopList = val
      },
      // 回传非油品价格
      onsoTherNogas (val) {
        this.otherNoGasPrice = val
      },
      openMenu () {
        this.isShopMenu = true
        this.ShopListShow = false
      },
      colseMenu () {
        this.isShopMenu = false
        this.isShopPayAlert = false
        this.ShopListShow = true
      },
      openPayalert () {
        if (!this.payType) {
          this.$store.dispatch('TOAST_SHOW', {content: '没有选择支付方式', msg: true})
          return
        }
        this.isShopPayAlert = true
        this.isShopMenu = false
        this.ShopListShow = true
      },
      switchTocoupon (event) {
        var el = event.currentTarget
        this.switchTc = el.checked
      },
      submitPrice () {
        var _this = this
        var openid = util.localItem.get('openid')
        var cart = JSON.parse(util.localItem.get('cart'))
        var priceTotal =  this.priceTotal.price + this.cartInfo.payPrice - this.couponVal //总支付金额
        var config = {
          openid:util.localItem.get('openid'),
          gsId:cart.gsId,                       // 油站id
          gsNoId:cart.gsNoId,                   // 油品id
          gsGunNo:cart.gsGunNo,                 // 油枪号
          gsPrice:cart.RealPrice,               // 挂牌价
          discountPrice:cart.couponPrice,       // 优惠价
          isUseInvoice:this.switchTc,           // 是否打印发票
          invoiceTitle:this.userInfo.invoiceTitle,       // 发票抬头
          otherNoGasId: cart.otherNoGasId,      // 其他非油品ID
          otherNoGasPrice:this.otherNoGasPrice, // 其他非油品
          quanTakeId:this.couponId,             // 抵用劵ID
          noGasItemPrice:this.priceTotal.price, // 非油品总价
          item:this.ShopList,                   // 非油品数组
          telephone: this.getMemberInfoByGsId.phone,// 手机号
          balance_pay: this.payType           // 是否余额支付
        }
        if (_this.getMemberInfoByGsId.total_balance < priceTotal) {
          _this.$store.dispatch('TOAST_SHOW', {content: '余额不是小于支付金额', msg: true})
          return
        }
        this.isShopPayAlert = false
        _this.$store.dispatch('pay', config)
      },
      sumitSelect () {
        var _this = this
        _this.pickerArr = []
        if(_this.getCouponListByGs.length === 0){
          return
        } else {
          _this.getCouponListByGs.coupon_list.forEach(function (val) {
            _this.pickerArr.push({label: val.quanName, value: val.dgPrice, id: val.id})
          })
          weui.picker(_this.pickerArr, {
            onConfirm: function (result) {
              _this.couponVal = parseInt(result[0])
              var name = _this.pickerArr.find(ii => ii.value === result[0])
              _this.couponName = name.label
              _this.couponId = name.id
            }
          })
        }
      }
    }
  }
</script>
<style lang="scss">
.inlet-shop-pay.active{
  z-index:1;
}
.add-coupon-close{
  float: right;
  height:12px;
  position: relative;
  margin:6px 0px 0 0;
  &:after,&:before{
    content: '';
    display: block;
    width:12px;
    height:1px;
    background-color:#333;
    position:relative;
    top:4px;
  }
  &::after{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  &::before{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    left:0px;
    top:5px;
  }
}
.weui-cell.coupon {
  .weui-cell__ft{
    position: relative;
    padding-right: 20px;
  }
  .weui-cell__ft:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -1px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;
  }
}
.cart-shop-list{
  .weui-flex{
    padding:10px;
    background-color:#fff;
    .cart{
      width:100px;
      .cart-input-number{
        width:87px;
        margin:14px auto 0;
      }
      .cart-input{
        display: inline-block;
        font-size:14px;
        width:40px;
        text-align: center;
        vertical-align: middle;
      }
      .cart-add,.cart-del{
        vertical-align: middle;
        display:inline-block;
        position: relative;
        width:18px;
        height:18px;
        text-align: center;
        &:before{
          width:18px;
          height:18px;
          line-height:18px;
          display:block;
        }
      }
      .cart-add{
        background-color:#00CC00;
        -weikit-radius:50%;
        border-radius:50%;
        &:before {
          content: '';
          width:10px;
          height: 2px;
          background-color:#fff;
          position: absolute;
          top:8px;
          left:50%;
          margin-left:-5px;
        }
        &:after {
          content: '';
          width:2px;
          height: 10px;
          background-color:#fff;
          position: absolute;
          top:4px;
          left:50%;
          margin-left:-1px;
        }
      }
      .cart-del{
        border:1px solid #eee;
        -weikit-radius:50%;
        border-radius:50%;
        &:before {
          content: '';
          width:10px;
          height: 2px;
          background-color:#333;
          position: absolute;
          top:8px;
          left:50%;
          margin-left:-5px;
        }
      }
    }
    .weui-flex__item{
      .name{
        margin-top:3px;
        font-size:14px;
      }
      .price{
        margin-left:15px;
      }
      .info{
        margin-top:3px;
        color:#00CC00
      }
    }
  }
  .img{
    width:60px;
    height:60px;
    margin-right:10px;
    img{
      width:60px;
      height:60px;
    }
  }
}
.inlet-shop-pay{
  background-color:#fff;
  position: fixed;
  bottom:0;
  left:0;
  z-index:4;
  right:0;
  .weui-btn{
    margin-left:5px;
    .J-price:before{
      top:-2px;
    }
  }
  .shop-list-btn{
    background-color: #009900;
    color:#fff;
    margin-right:30px;
    text-align: center;
    font-size:12px;
    padding:0 10px;
    &:before{
      content: '';
      display: block;
      height:33px;
      background-image: url("/static/images/shop_list.png");
      background-size:20px 20px;
      background-position:center center;
      background-repeat: no-repeat;
    }
  }
  .weui-btn{
    margin:7px 10px;
  }
}
.J-inlet-shop{
  .weui-cells{
    margin-top:.8em;
  }
  .weui-cells._paytype{
    .pay_balance{
      font-size:14px;
      padding:5px 15px 10px;
     color: #666;
    }
    ._label{
      font-size:14px;
      padding:10px 15px;
      display: inline-block;
      position: relative;
      &:before,&:after{
        content: '';
        display:inline-block;
        vertical-align: middle;
        border-radius: 50%;
      }
      &:after{
        width:8px;
        height: 8px;
        position: absolute;
        background-color:#fff;
        left:20px;
        top:16px;
      }
      &:before{
        width:16px;
        height:16px;
        border:1px solid #eee;
        margin-right: 5px;
      }
      ._radio{
        display: none;
      }
    }
    ._label.is-checked{
      &:before{
        background-color: #0bb20c;
        border:1px solid #0bb20c;
      }
    }
    ._label.is-disabled{
      color: #d1dbe5;
    }
    ._label.is-checked.is-disabled{
      color: #d1dbe5;
      &:before {
        background-color: #d1dbe5;
        border-color: #d1dbe5;
      }
    }
  }
  .weui-btn{
    margin-left:5px;
    .J-price:before{
      top:-2px;
    }
  }
  .inlet-coupon{
    height: 47px;
    overflow: hidden;
    transition: height .2s;
    -webkit-transition: height .2s;
    background-color:#fff;
  }
  .inlet-coupon.active{
    height: 94px;
  }
  .inlet-record.activeHide{
    bottom:-268px;
  }
  .inlet-record.activeFixd{
    bottom:60px;
  }
  .activeFixd-bg{
    background-color:rgba(0,0,0,.6);
    position: absolute;
    left:0;
    right:0;
    z-index:2;
    bottom:0;
    top:0;
  }
  .inlet-record{
    left:0;
    right:0;
    transition: bottom .2s;
    -webkit-transition: bottom .2s;
  }
  .inlet-record.zIndex{
    z-index:3;
  }
  .inlet-record-bk{
    margin-top:10px;
    position: fixed;
    background-color:#fff;
    .add-coupon-close{
      padding:4px;
      margin-top:0;
      border-radius:50%;
      -webkit-border-radius:50%;
      border:1px solid #bdb9b9;
    }
    .bf{
      background-color:#fff;
    }
    .weui-flex{
      padding:10px;
    }
    .record_a{
      color:#333;
    }
    .record_{
      overflow: hidden;
      font-size: 14px;
      em {
        font-style: normal;
        margin-right: 5px;
      }
    }
    .inlet-pay-alert{
      position: fixed;
      top:20%;
      left:15px;
      right:15px;
    }
  }
  .inlet-pay-alert{
    top:30%;
    left:25px;
    right:25px;
    z-index:5;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
  }
  .weui-switch{
    margin-top:5px;
    float:left;
  }
  .weui-cell{

  }
  .coupon-input{
    font-size:16px;
    text-align:right;
  }
  .weui-cell__ft:after{
    display: none;
  }
  .weui-cell:before{
    right:15px;
  }
}
.inlet-cart{
  margin-top:10px;
}

</style>
